<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当地游 - 旅游预订平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="../../bootstrap-5.3.6-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="local.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white py-2 py-lg-3 border-bottom">
        <div class="container">
            <a class="navbar-brand" href="../index/index.html">
                <i class="fas fa-map-marked-alt me-2"></i>当地游
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarSupportedContent">                   
                <div class="d-flex align-items-center search-box px-3 py-2 ms-lg-auto">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input type="text" class="form-control" placeholder="请输入目的地/产品名称">
                </div>
            </div>
        </div>
    </nav>
    
    <!-- 主要内容区 -->
    <div class="container mt-3 mt-lg-4 px-3 px-lg-0">
        <div class="row gx-lg-4">
            <!-- 左侧导航 - 折叠式目的地列表 -->
            <div class="col-lg-3 mb-4 mb-lg-0">
                <div class="accordion" id="destinationAccordion">
                    <!-- 国内旅游 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingDomestic">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#collapseDomestic" aria-expanded="false" aria-controls="collapseDomestic">
                                <i class="fas fa-map-marker-alt me-2"></i>国内旅游
                            </button>
                        </h2>
                        <div id="collapseDomestic" class="accordion-collapse collapse" aria-labelledby="headingDomestic" 
                             data-bs-parent="#destinationAccordion">
                            <div class="accordion-body pt-0">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="destination-item">丽江</div>
                                        <div class="destination-item">厦门</div>
                                        <div class="destination-item">三亚</div>
                                        <div class="destination-item">北京</div>
                                        <div class="destination-item">成都</div>
                                        <div class="destination-item">昆明</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="destination-item">上海</div>
                                        <div class="destination-item">大理</div>
                                        <div class="destination-item">西安</div>
                                        <div class="destination-item">哈尔滨</div>
                                        <div class="destination-item">广州</div>
                                        <div class="destination-item">更多...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 日本 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingJapan">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#collapseJapan" aria-expanded="false" aria-controls="collapseJapan">
                                <i class="fas fa-flag me-2"></i>日本
                            </button>
                        </h2>
                        <div id="collapseJapan" class="accordion-collapse collapse" aria-labelledby="headingJapan" 
                             data-bs-parent="#destinationAccordion">
                            <div class="accordion-body pt-0">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="destination-item">东京</div>
                                        <div class="destination-item">大阪</div>
                                        <div class="destination-item">京都</div>
                                        <div class="destination-item">北海道</div>
                                        <div class="destination-item">冲绳</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="destination-item">富士山</div>
                                        <div class="destination-item">札幌</div>
                                        <div class="destination-item">小樽</div>
                                        <div class="destination-item">福冈</div>
                                        <div class="destination-item">神户</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 东南亚泰国 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingSEA">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#collapseSEA" aria-expanded="false" aria-controls="collapseSEA">
                                <i class="fas fa-umbrella-beach me-2"></i>东南亚泰国
                            </button>
                        </h2>
                        <div id="collapseSEA" class="accordion-collapse collapse" aria-labelledby="headingSEA" 
                             data-bs-parent="#destinationAccordion">
                            <div class="accordion-body pt-0">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="destination-item">普吉岛</div>
                                        <div class="destination-item">清迈</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="destination-item">巴厘岛</div>
                                        <div class="destination-item">新加坡</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 香港澳门台湾 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingHK">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#collapseHK" aria-expanded="false" aria-controls="collapseHK">
                                <i class="fas fa-city me-2"></i>香港澳门台湾
                            </button>
                        </h2>
                        <div id="collapseHK" class="accordion-collapse collapse" aria-labelledby="headingHK" 
                             data-bs-parent="#destinationAccordion">
                            <div class="accordion-body pt-极地">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="destination-item">香港</div>
                                        <div class="destination-item">澳门</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="destination-item">中国台湾</div>
                                        <div class="destination-item">花莲</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 欧洲 法国 德国 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingEurope">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#collapseEurope" aria-expanded="false" aria-controls="collapseEurope">
                                <i class="fas fa-landmark me-2"></i>欧洲 法国 德国
                            </button>
                        </h2>
                        <div id="collapseEurope" class="accordion-collapse collapse" aria-labelledby="headingEurope" 
                             data-bs-parent="#destinationAccordion">
                            <div class="accordion-body pt-0">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="destination-item">法国</div>
                                        <div class="destination-item">西班牙</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="destination-item">迪拜</div>
                                        <div class="destination-item">意大利</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 美洲 澳洲 非洲 -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingAmerica">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" 
                                    data-bs-target="#collapseAmerica" aria-expanded="false" aria-controls="collapseAmerica">
                                <i class="fas fa-globe-americas me-2"></i>美洲 澳洲 非洲
                            </button>
                        </h2>
                        <div id="collapseAmerica" class="accordion-collapse collapse" aria-labelledby="headingAmerica" 
                             data-bs-parent="#destinationAccordion">
                            <div class="accordion-body pt-0">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="destination-item">美国</div>
                                        <div class="destination-item">澳大利亚</div>
                                    </div>
                                    <div class="col-6">
                                        <div class="destination-item">新西兰</div>
                                        <div class="destination-item">摩洛哥</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 服务图标 -->
                <div class="row mt-3 g-2">
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-landmark"></i>
                            <div>景区/场馆</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-calendar-day"></i>
                            <div>一日游</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-calendar-week"></i>
                            <div>多日游</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-hiking"></i>
                            <div>户外活动</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-hotel"></i>
                            <div>酒店套餐</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-theater-masks"></i>
                            <div>演出展览</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-utensils"></i>
                            <div>美食</div>
                        </div>
                    </div>
                    <div class="col-3 col-sm-3 col-md-2 col-lg-3">
                        <div class="service-icon">
                            <i class="fas fa-shuttle-van"></i>
                            <div>接送机/站</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧内容 -->
            <div class="col-lg-9">
                <!-- 标签页导航 -->
                <div class="d-flex overflow-auto mb-3">
                    <ul class="nav nav-pills flex-nowrap" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button">正在热卖</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button">人气推荐</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button">四川</极地>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-tibet-tab" data-bs-toggle="pill" data-bs-target="#pills-tibet" type="button">西藏</button>
                        </li>
                        <li class="nav极地" role="presentation">
                            <button class="nav-link" id="pills-yunnan-tab" data-bs-toggle="pill" data-bs-target="#pills-yunnan" type="button">云南</button>
                        </li>
                    </ul>
                </div>
                
                <!-- 标签页内容 -->
                <div class="tab-content" id="pills-tabContent">
                    <!-- 正在热卖 -->
                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100"
                                         class="card-img-top" alt="西藏林芝">
                                    <div class="card-body">
                                        <h6 class="card-title">西藏林芝5日游探索冰川秘境·豪华商务座椅·藏装旅拍南迦巴瓦峰+巴</h6>
                                        <div class="product-price">￥2530起</div>
                                        <div class="product-sales">已售完1889 店铺:思...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/3c/98/77c41dbc8b5e05a560e8818ad48acf25.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100"
                                         class="card-img-top" alt="丽江香格里拉">
                                    <div class="card-body">
                                        <h6 class="card-title">【早鸟特惠】丽江香格里拉梅里雪山崩徒步5日游（摄影师单反跟</h6>
                                        <div class="product-price">￥1760起</div>
                                        <div class="product-sales">已售完8608 店铺:思...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/d0/4b/a6356673233b3462a578b0a5372bc730.jpeg?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100"
                                         class="card-img-top" alt="云南">
                                    <div class="card-body">
                                        <h6 class="card-title">云南大理丽江5日游·洱海旅拍·玉龙雪山·泸沽湖</h6>
                                        <div class="product-price">￥1490起</div>
                                        <div class="product-sales">已售完15247 店铺:H...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/0a/58/c4df538d81c2b6ae0de70ac1fb59d83c.jpeg?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100"
                                         class="card-img-top" alt="玉龙雪山">
                                    <div class="card-body">
                                        <h6 class="card-title">【8人团 包出票 可选日照金山】云南丽江玉龙雪山纯玩一日游（冰川）</h6>
                                        <div class="product-price">￥170起</div>
                                        <div class="product-sales">已售完4321 店铺:雪...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 人气推荐 -->
                    <div class="tab-pane fade" id="pills-profile" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <span class="hot-tag">热卖</span>
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="香港迪士尼">
                                    <div class="card-body">
                                        <h6 class="card-title">香港迪士尼乐园1日游·亲子套餐·快速通行证</h6>
                                        <div class="product-price">￥520起</div>
                                        <div class="product-sales">已售完3245 店铺:迪...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <span class="hot-tag">推荐</span>
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="东京">
                                    <div class="card-body">
                                        <h6 class="card-title">东京3日自由行·浅草寺+银座+迪士尼·含JR Pass</h6>
                                        <div class="product-price">￥2980起</div>
                                        <div class="product-sales">已售完4567 店铺:东...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="普吉岛">
                                    <div class="card-body">
                                        <h6 class="card-title">普吉岛5日4晚自由行·皮皮岛出海·泰式SPA·含接送机</h6>
                                        <div class="product-price">￥1899起</div>
                                        <div class="product-sales">已售完6789 店铺:泰...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 四川 -->
                    <div class="tab-pane fade" id="pills-contact" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="九寨沟">
                                    <div class="card-body">
                                        <h6 class="card-title">九寨沟黄龙3日游·纯玩无购物·VIP小团</h6>
                                        <div class="product-price">￥980起</div>
                                        <div class="product-sales">已售完4321 店铺:川...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="稻城亚丁">
                                    <div class="card-body">
                                        <h6 class="card-title">稻城亚丁5日游·四姑娘山·新极地·氧气瓶+防寒服</h6>
                                        <div class="product-price">￥1580起</div>
                                        <div class="product-sales">已售完2345 店铺:西...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="峨眉山">
                                    <div class="card-body">
                                        <h6 class="card-title">峨眉山乐山大佛2日游·金顶日出·温泉酒店</h6>
                                        <div class="product-price">￥680极地</div>
                                        <div class="product-sales">已售完3456 店铺:乐...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 西藏 -->
                    <div class="tab-pane fade" id="pills-tibet" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="拉萨">
                                    <div class="card-body">
                                        <h6 class="card-title">拉萨布达拉宫大昭寺1日游·专业讲解·含门票</h6>
                                        <div class="product-price">￥380起</div>
                                        <div class="product-sales">已售完1234 店铺:藏...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="纳木错">
                                    <div class="card-body">
                                        <h6 class="card-title">纳木错2日游·圣象天门·星空露营·含氧气瓶</h6>
                                        <div class="product-price">￥780起</div>
                                        <div class="product-sales">已售完5678 店铺:天...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="珠峰">
                                    <div class="card-body">
                                        <h6 class="card-title">珠峰大本营4日游·日喀则·羊卓雍措·边防证办理</h6>
                                        <div class="product-price">￥1280起</div>
                                        <div class="product-sales">已售完2345 店铺:极...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 云南 -->
                    <div class="tab-pane fade" id="pills-yunnan" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top极地" alt="丽江">
                                    <div class="card-body">
                                        <h6 class="card-title">丽江古城1日游·束河古镇·玉龙雪山·印象丽江演出</h6>
                                        <div class="product-price">￥480起</div>
                                        <div class="product-sales">已售完4567 店铺:云...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="泸沽湖">
                                    <div class="card-body">
                                        <h6 class="card-title">泸沽湖2日游·摩梭家访·猪槽船游湖·篝火晚会</h6>
                                        <div class="product-price">￥680起</div>
                                        <div class="product-sales">已售完3456 店铺:湖...</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6">
                                <div class="card product-card h-100">
                                    <img src="https://sales.mafengwo.net/img/09/7e/8d3357594428b6680bcf4a752ac4e464.png?imageMogr2%2Fthumbnail%2F%21532x302r%2Fgravity%2FCenter%2Fcrop%2F%21532x302%2Fquality%2F100" class="card-img-top" alt="西双版纳">
                                    <div class="card-body">
                                        <h6 class="card-title">西双版纳3日游·野象谷·傣族园·热带植物园</h6>
                                        <div class="product-price">￥890起</div>
                                        <div class="product-sales">已售完2345 店铺:热...</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 自由行攻略部分 -->
                <div class="mt-4 mt-lg-5">
                    <h5 class="mb-3">自由行攻略</h5>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card guide-card h-100">
                                <div class="card-body">
                                    <h6>日本交通最强攻略(西瓜卡、JR pass)</h6>
                                    <p class="text-muted small">日本最难订到的主题乐园 | 冲绳，教您最科学的玩法！</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card guide-card h-100">
                                <div class="card-body">
                                    <h6>京都必玩TOP5！</h6>
                                    <p class="text-muted small">北海道就要这么玩！ | 四季玩法大公开</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card guide-card h-100">
                                <div class="card-body">
                                    <h6>香港美食攻略</h6>
                                    <p class="text-muted small">史上最全香港亲子游攻略 | 香港自由行全指南！必体验的TOP 6！</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card guide-card h-100">
                                <div class="card-body">
                                    <h6>像当地人一样玩转台北及周边</h6>
                                    <p class="text-muted small">台湾交通最强攻略 入台必备（入台证、高铁票、悠游卡）</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 和真实旅行者实时交流 -->
                <div class="chat-box d-flex align-items-center mt-4">
                    <i class="fas fa-comments"></i>
                    <div>
                        <h6 class="mb-0">和真实旅行者实时交流</h6>
                        <small>攻略群</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4 mb-md-0">
                    <h5><i class="fas fa-compass me-2"></i>旅游网</h5>
                    <p class="mb-3">提供最专业的旅游攻略和社区服务</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-3"><i class="fab fa-facebook-f fs-5"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-twitter fs-5"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-instagram fs-5"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-weixin fs-5"></i></a>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <ul class="list-inline footer-links mb-3">
                        <li class="list-inline-item me-3"><a href="#" class="text-white">关于我们</a></li>
                        <li class="list-inline-item me-3"><a href="#" class="text-white">隐私政策</a></li>
                        <li class="list-inline-item me-3"><a href="#" class="text-white">使用条款</a></li>
                        <li class="list-inline-item"><a href="#" class="text-white">联系我们</a></li>
                    </ul>
                    <p class="mb-0 small">
                        © 2025 旅游网. 23软件技术2班. 版权所有 
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="../../bootstrap-5.3.6-dist/js/bootstrap.js"></script>
</body>
</html>